<!--协查情况统计-->
<template>
  <layout :title-url="titleUrl" class="layout-wrap">
    <div class="layout">
      <div class="layout-west">
        <div class="mod">
          <mod-title title="专线协查反馈数据分布"></mod-title>
          <js-pie :echartData="echartData"></js-pie>
          <!--<bar-one :series-data="oneData" :x-axis-data="oneXData"></bar-one>-->
        </div>
        <div class="mod" ref="areaHeight">
          <mod-title title="最近一周办理次数"></mod-title>
          <js-line :xData="xDataFrequency"
                   :yData="yDataFrequency"
                   :colors="colorFrequency"
                   :to-colors="toColors"
                   :form-colors="formColors"></js-line>
        </div>
      </div>
      <div class="layout-main">
        <js-map-line></js-map-line>
      </div>
      <div class="layout-east">
        <js-count title="协查反馈数量总数" count="1343278285"></js-count>
        <div class="check-times">协查总数：<span>33</span>次</div>
        <el-table
          :data="tableData"
          class="check-detail">
          <el-table-column
            prop="city"
            label="城市">
          </el-table-column>
          <el-table-column
            prop="receive"
            label="接受">
          </el-table-column>
          <el-table-column
            prop="send"
            label="发送">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </layout>
</template>

<style lang="scss">
  * {
    box-sizing: border-box;
  }

  .layout {
    height: 100%;
    padding-top: 60px;
    display: flex;

  .layout-west, .layout-east, .layout-main {
    height: 100%;
  }

  .layout-west, .layout-east {
    overflow-y: hidden;
    flex: 1
  }

  .mod {
    height: 50%;
    list-style: none;
    font-size: 22px;

  ul {
    margin: 20px 0 0;
  }

  li {
    height: 45px;
    line-height: 45px;
    overflow: hidden;
    border-bottom: 1px solid #428ED2;

  .title {
    color: #fff;
    width: 60%;
    max-width: 300px;
    height: 45px;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .number {
    width: 40%;
    height: 45px;
    float: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: bold;
    font-size: 22px;
    color: #ffc22e;
    text-align: right;
  }

  }

  }
  .layout-main {
    margin: 0 10px;
    flex: 1.5;
    padding-top: 90px;
  }

  .el-table {
    background-color: rgba(255, 255, 255, 0);
  }

  .el-table {
    border-bottom: none
  }

  .el-table th {
    text-align: center;
    background: rgba(14, 65, 121, .8);
    color: #FFFC00;
  }

  .el-table th, .el-table td {
    padding: 0;
    height: 50px;
    line-height: 50px;
    border-bottom: none
  }

  .el-table tr:nth-child(even) {
    background: rgba(14, 65, 121, .3);
    color: #fff;
  }

  .el-table tr:nth-child(odd) {
    background: rgba(0, 0, 0, 0);
    color: #fff;
  }

  .el-table tr:last-child td {
    border-bottom: none
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: inherit;
  }

  .el-table::before {
    height: 0;
  }

  }

  .check-times {
    background: url("../assets/images/mod-title.png") top center no-repeat;
    padding: 10px 0;
    font-size: 24px;
    color: #00f6ff;
    text-align: center;
    font-weight: bold;

  span {
    color: #edff00;
  }

  }

  .check-detail {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
</style>

<script>
  import ModTitle from '../components/mod-title.vue'
  import Layout from '../components/layout.vue'
  import JsMapLine from '../components/js-map-line.vue'
  import JsCount from '../components/js-count.vue'
  import JsPie from '../components/js-pie.vue'
  import XdhLayout from '../widgets/xdh-layout'
  import BarOne from '../components/bar-one'
  import {on} from 'element-ui/lib/utils/dom'
  import jsLine from '../components/js-line'

  const statics = [
    {
      title: '南京市—人员信息 ',
      num: 2398000
    },
    {
      title: '无锡市—企业变更登记信息',
      num: 2398000
    },
    {
      title: '徐州市—组织机构代码证-变',
      num: 2398000
    },
    {
      title: '常州市—股权结构信息',
      num: 2398000
    },
    {
      title: '苏州市—自然人-股东-发起人',
      num: 2398000
    },
    {
      title: '南通市—注销登记信息',
      num: 2398000
    },
    {
      title: '扬州市—监事会信息-变更',
      num: 2398000
    }
  ]

  export default {
    components: {
      ModTitle,
      Layout,
      JsMapLine,
      BarOne,
      jsLine,
      JsPie,
      JsCount,
      XdhLayout
    },
    mounted() {
      this.areaH = this.$refs.areaHeight.clientHeight - 40;
      on(window, 'resize', this.getAreaHeight);
    },
    computed: {
      barHeight() {
        return this.areaH + 'px'
      }
    },
    data() {
      return {
        titleUrl: require('../assets/images/check_monitor.png'),
        oneData: [45, 43, 56, 79, 65],
        oneXData: ['姓名', '身份证', '电话', '单位', '地址'],
        xDataFrequency: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        yDataFrequency: [135, 165, 160, 158, 85, 61, 140, 120, 95, 80, 73, 85],
        colorFrequency: 'rgba(255, 180, 0,1)',
        toColors: 'rgba(255, 180, 0,1)',
        formColors: 'rgba(240, 87, 61, 1)',
        options: {},
        statics: statics,
        areaH: '',
        tableData: [
          {
            city: '省纪委',
            receive: 20,
            send: 10
          },
          {
            city: '南京',
            receive: 20,
            send: 10
          },
          {
            city: '无锡',
            receive: 20,
            send: 10
          },
          {
            city: '镇江',
            receive: 20,
            send: 10
          },
          {
            city: '泰州',
            receive: 20,
            send: 10
          },
          {
            city: '常州',
            receive: 20,
            send: 10
          },
          {
            city: '苏州',
            receive: 20,
            send: 10
          },
          {
            city: '南通',
            receive: 20,
            send: 10
          },
          {
            city: '盐城',
            receive: 20,
            send: 10
          },
          {
            city: '徐州',
            receive: 20,
            send: 10
          },
          {
            city: '宿迁',
            receive: 20,
            send: 10
          },
          {
            city: '扬州',
            receive: 20,
            send: 10
          },
          {
            city: '淮安',
            receive: 20,
            send: 10
          },
          {
            city: '连云港',
            receive: 20,
            send: 10
          }
        ],
        echartData: [
          {value: 200, name: '个税专线'},
          {value: 150, name: '公安专线'},
          {value: 150, name: '联通通话'},
          {value: 100, name: '移动通话'},
          {value: 150, name: '电信通话'},
          {value: 100, name: '国土专线'}
        ]
      }
    },
    methods: {
      getAreaHeight() {
        this.areaH = this.$refs.areaHeight.clientHeight - 40;
      }
    }
  }
</script>

